<template>
	<div style="padding:0 30px 50px;">
		<div v-if="showSearch">
			<!--搜索输入框-->
			<div class="search">
				<div class="search-input">
					<div style="width: 325px;">
						<label for="">{{$t('search.MerchantName')}}：</label>
						<el-input v-model="searchMerchantData.name" class="block-ipt" :maxlength=100 ></el-input>
					</div>
					<div style="width: 325px;">
						<label for="">{{$t('search.SubAccountNo')}}：</label>
						<el-input v-model="searchMerchantData.no" class="block-ipt"></el-input>
					</div>
					<div style="width: 325px;">
						<label for="">{{$t('search.AgentName1')}}：</label>
						<el-input v-model="searchMerchantData.dName" class="block-ipt" :maxlength=100 ></el-input>
					</div>
					<div style="width: 325px;">
						<label for="">{{$t('search.AccountStatus')}}：</label>
						<el-select v-model="searchMerchantData.state" :placeholder="$t('placeH.All')" clearable class='filter-item condition block-ipt'>
							<el-option :value="$t('button.Suspended')"></el-option>
							<el-option :value="$t('button.Enabled')"></el-option>
							<el-option :value="$t('search.Pending')"></el-option>
							<el-option :value="$t('search.Rejected')"></el-option>
						</el-select>
					</div>
					<div style="width: 325px;">
						<label for="">{{$t('search.EstablishmentDate')}}：</label>
						<el-date-picker :editable=false class="filter-item block-ipt" type="date" placeholder="" v-model="searchMerchantData.startDate"></el-date-picker>
					</div>
				</div>
				<div class="search-btn">
					<el-button class="blue-btn mini2-btn" @click="handleFilter()">{{ $t('button.search') }}</el-button>
					<el-button class="blue-btn mini2-btn" @click="resetFilter">{{ $t('button.Reset') }}</el-button>
					<el-button class="blue-btn max-btn btn-clearance" @click="addMerchant">{{ $t('button.NewMer') }}</el-button>
				</div>
			</div>
			<!--商户列表-->
			<template>
				<div class="table-border">
					<div class="table-head">{{$t('button.Merchant')}}</div>
					<el-table ref="singleTable" :data="merchantDatas" height=400 fit highlight-current-row style="width: 100%">
						<el-table-column type="index" fixed :label="$t('index.Number')" width="70">
						</el-table-column>
						<el-table-column prop="name" :label="$t('search.MerchantName1')" width="220">
						</el-table-column>
						<el-table-column prop="no" :label="$t('search.SubAccountNo')" width="165">
						</el-table-column>
						<el-table-column prop="address" :label="$t('mer.MerchantAddress')" width="250">
						</el-table-column>
						<el-table-column prop="dName" :label="$t('trade.Agent')" width="150">
						</el-table-column>
						<el-table-column prop="state" :label="$t('search.AccountStatus')" width="155" :formatter="merchantState">
						</el-table-column>
						<el-table-column prop="balance" :label="$t('mer.AccountBalance') + currency" width="170" :formatter="judgeBalance">
						</el-table-column>
						<el-table-column v-if="this.companyId==='2'?false:true" prop="endamt" :label="$t('mer.AvailableBalance') + currency" width="175" :formatter="judgeEndamt">
						</el-table-column>
						<el-table-column v-if="this.companyId==='2'?false:true" prop="freezeamt" :label="$t('mer.OutstandingAmount') + currency" width="210" :formatter="judgeFreezeamt">
						</el-table-column>
						<el-table-column prop="shopSum" :label="$t('button.Shops')" width="100">
						</el-table-column>
						<el-table-column prop="solidSum" :label="$t('trade.Device')" width="100">
						</el-table-column>
						<el-table-column prop="addedDate" :label="$t('search.EstablishmentDate')" width="200">
						</el-table-column>
						<el-table-column :label="$t('index.Operation')" width="230" style="text-align: left;">
							<template scope='scope'>
								<div style="text-align: left;">
									<el-button class="blue-btn mini-btn" @click="showMerchant(scope.row.id,scope.row.state)">{{$t('button.Manage')}}</el-button>
									<el-button class="blue-btn mini-btn" @click="shopList(scope.row.id,scope.row.state)">{{$t('button.Shops')}}</el-button>
									<el-button v-if="scope.row.state==='3'" class="blue-btn mini-btn" @click="enable(scope.row.id)">{{$t('button.Enabled1')}}</el-button>
									<el-button v-if="scope.row.state==='1'" class="blue-btn mini-btn" @click="disable(scope.row.id)">{{$t('button.Suspended1')}}</el-button>
									<el-button v-if="scope.row.state==='2'" class="blue-btn mini-btn" @click="del(scope.row.id,scope.row.phone)">{{$t('button.delete')}}</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-container">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="searchMerchantData.page" :page-sizes="[10,20,30,50]" :page-size="searchMerchantData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
					</div>
				</div>
			</template>
		</div>

		<!--查看商户下店铺详情-->
		<div class="shopListMetails" v-show='shopListShow'>
			<template>
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane :label="item.shopName" :name="item.shopName" :key="item.shopName" v-for="item in shopListData" style="display: block;">
					</el-tab-pane>
					<el-form :label-position="labelPosition">
						<table class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td colspan="4" style="text-align: left;">
										<div class="table-head">
											<span>{{name}}</span> 
											<span class="shopStateStyle">{{shopStateInfo}}</span>
										</div>
									</td>
								</tr>
								<tr>
									<td style="width: 25%;">{{$t('agent.Name')}}*</td>
									<td><input type="text" v-model.lazy="tableObj.shopName" :disabled="disabled" maxlength='100' /></td>
									<td style="width: 25%;">{{$t('mer.ShortName')}}*</td>
									<td><input type="text" v-model.lazy="tableObj.abbreviation" :disabled="disabled" maxlength='50' /></td>
								</tr>
								<tr>
									<td>{{$t('agent.Address')}}*</td>
									<td><input type="text" v-model.lazy="tableObj.address" :disabled="disabled" maxlength='250' /></td>
									<td>{{$t('mer.Sector')}}</td>
									<td>
										<el-select id="shopIndustryM" value-key="id" v-model="tableObj.shopIndustry" clearable :placeholder="$t('placeH.Please')" @change="selectShopIndustryM" :disabled="disabled" style="line-height: 40px;">
											<el-option v-for="item in optionsM" :key="item.id" :label="item.industryName" :value="item.industryName">
											</el-option>
										</el-select>
									</td>	
								</tr>
								<tr>
									<td>{{$t('agent.Contact')}}*</td>
									<td><input type="text" v-model.lazy="tableObj.shopContact" :disabled="disabled" maxlength='50'  /></td>
									<td>{{ this.companyId === '2' ? $t('shop.Phone') : $t('shop.Phone1') }}</td>
									<td><input type="text" v-model.lazy="tableObj.phone" :disabled="disabled" /></td>
								</tr>
								<tr>
									<td>{{ this.companyId === '2' ? $t('shop.Email1') : $t('shop.Email') }}</td>
									<td><input type="text" v-model.lazy="tableObj.email" :disabled="disabled" maxlength='20' /></td>
									<td>{{$t('inputBox.shopNumber')}}</td>
									<td><input type="text" v-model.lazy="tableObj.shopId" disabled="disabled" maxlength='20' /></td>
								</tr>
								<tr>
									<td style="width: 25%;height: 160px;">{{$t('mer.ShopPhotos')}}*</td>
									<td colspan="3" style="text-align: left;position: relative;">
										<ul id="modifyShopUl">
											<li v-if='tableObj.storePhotosUrl'>
												<img :src="tableObj.storePhotosUrl" alt="" />
												<span class="delImg" v-show='!disabled' @click="delImg()">×</span>
											</li>
											<li v-if='tableObj.storePhotosUrl1'>
												<img :src="tableObj.storePhotosUrl1" alt="" />
												<span class="delImg" v-show='!disabled' @click="delImg1()">×</span>
											</li>
											<li v-if='tableObj.storePhotosUrl2'>
												<img :src="tableObj.storePhotosUrl2" alt="" />
												<span class="delImg" v-show='!disabled' @click="delImg2()">×</span>
											</li>
											<li v-if='tableObj.storePhotosUrl3'>
												<img :src="tableObj.storePhotosUrl3" alt="" />
												<span class="delImg" v-show='!disabled' @click="delImg3()">×</span>
											</li>
											<li v-if='tableObj.storePhotosUrl4'>
												<img :src="tableObj.storePhotosUrl4" alt="" />
												<span class="delImg" v-show='!disabled' @click="delImg4()">×</span>
											</li>
										</ul>
										<el-upload v-show='isShopFiveImg' id="modifyShopElupload" action="/api/share/picture/upload" :disabled="disabled" :show-file-list="false" :on-success="shopPhotosSuccess" name="upfile" list-type="picture" :headers="headers" style="display: inline-block;position: absolute;top: 20px">
											<i class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
									</td>
								</tr>
							</tbody>
						</table>
						<div class="btn-box">
							<el-button class="blue-btn small-btn" @click="shopGoback">{{$t('button.Return')}}</el-button>
							<el-button class="blue-btn small-btn" v-if='isModify' @click="modify">{{$t('button.Modify')}}</el-button>
							<el-button class="blue-btn small-btn" v-show='showBtn' @click="modifyOk">{{ this.shopObjState === 3 && this.merBigState === "1" ? $t('button.Resubmit') : $t('button.OK') }}</el-button>
							<el-button class="blue-btn small-btn" v-if='isADD' @click="addShop">{{ $t('button.New') }}</el-button>
							<el-button class="blue-btn small-btn" v-if="isDel" @click="deleteShop">{{ $t('button.delete') }}</el-button>
						</div>
					</el-form>
				</el-tabs>
			</template>
		</div>
		<!--新增店铺-->
		<div class="shopListMetails" v-show='addShopShow'>
			<el-form :label-position="labelPosition" :model="addShopData">
				<table class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
					<tbody>
						<tr>
							<td colspan="4" style="text-align: left;">
								<div class="table-head">{{$t('mer.NewShop')}}</div>
							</td>
						</tr>
						<tr>
							<td style="width: 25%;">{{$t('agent.Name')}}*</td>
							<td><input type="text" v-model.lazy="addShopData.shopName" maxlength='100' /></td>
							<td style="width: 25%;">{{$t('mer.ShortName')}}*</td>
							<td><input type="text" v-model.lazy="addShopData.abbreviation" maxlength='50' /></td>
						</tr>
						<tr>
							<td>{{$t('agent.Address')}}*</td>
							<td><input type="text" v-model.lazy="addShopData.address" maxlength='250' /></td>
							<td>{{$t('mer.Sector')}}</td>
							<td>
								<el-select v-model="shopIndustry" clearable :placeholder="$t('placeH.Please')" @change="selectShopIndestry" style="line-height: 40px;">
									<el-option v-for="item in optionsI" :key="item.id" :label="item.industryName" :value="item.industryName">
									</el-option>
								</el-select>
							</td>
						</tr>
						<tr>
							<td>{{$t('agent.Contact')}}*</td>
							<td><input type="text" v-model.lazy="addShopData.shopContact" maxlength='50' /></td>
							<td>{{ this.companyId === '2' ? $t('shop.Phone') : $t('shop.Phone1') }}</td>
							<td><input type="text" v-model.lazy="addShopData.phone" maxlength='20' /></td>
						</tr>
						<tr>
							<td>{{ this.companyId === '2' ? $t('shop.Email1') : $t('shop.Email') }}</td>
							<td><input type="text" v-model.lazy="addShopData.email" maxlength='50' /></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td style="width: 25%;height: 100px;">{{$t('mer.ShopPhotos')}}*</td>
							<td style="width: 25%;text-align: left;position: relative;" colspan="3">
								<ul id="shopImgUl">
									
								</ul>
								<el-upload v-show='isFiveImg' :before-upload="beforeImgUpload" id="newShopElipload" action="/api/share/picture/upload" :disabled="false" :show-file-list="false" :on-success="newShopPhotosSuccess" name="upfile" list-type="picture" :headers="headers" style="display: inline-block;position: absolute;top: 0">
									<!--<img v-if="addShopData.storePhotosUrl" :src="addShopData.storePhotosUrl" class="avatar">	-->
									<i class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</td>
						</tr>
					</tbody>
				</table>
				<div class="btn-box">
					<el-button class="blue-btn small-btn" @click="addGoback">{{$t('button.Return')}}</el-button>
					<el-button class="blue-btn small-btn" @click="addOk">{{$t('salesman.OK')}}</el-button>
				</div>
			</el-form>
		</div>

		<merDetails v-if='merDetailsIsShow' :id="id" :states="states" :merState=merState :disId="disId" @merDetailsChange="merDetailsFun"></merDetails>
	</div>
</template>
<script>
import {
  findMerchant,
  merchantShop,
  addShopAjax,
  mercUpdateIsEnabled,
  queryIndustry,
  delMer,
  delShop,
  merchantShopTwo,
  reauditShop
} from "api/businessManagement/merchant/index";
import { merDetails } from "views/z_businessManagement/components";
//	import { mapGetters } from 'vuex';
export default {
  name: "merchant",
  components: { merDetails },
  //computed:{
  //	...mapGetters(['userId','distributorId','companyId'])
  //},
  data() {
    return {
      name: "店铺详情",
      currency: localStorage.getItem("companyId") === "2" ? "(A$)" : "(HK$)",
      activeName: "",
      headers: { "access-token": localStorage.getItem("access-token") },
      input: "",
      id: null,
      merState: null,
      states: null,
      labelPosition: "right",
      showSearch: true,
      isShow: false,
      merDetailsIsShow: false,
      shopListShow: false,
      isModify: true,
      isADD: true,
      showBtn: false,
      disabled: true,
      addShopShow: false,
      merchantDatas: [],
      shopListData: [],
      addShopData: {
        storePhotosUrl: undefined,
        storePhotosUrl1: undefined,
        storePhotosUrl2: undefined,
        storePhotosUrl3: undefined,
        storePhotosUrl4: undefined
      },
      //店铺详情
      tableObj: {},
      res: [],
      //按条件搜索商户所需参数
      searchMerchantData: {
        page: 1,
        pageSize: 10,
        dName: undefined,
        name: undefined,
        no: undefined,
        startDate: undefined,
        state: undefined
      },
      //第一次进商户默认展示的数据所需的参数
      // merchantFormData: {},
      merId: "",
      disId: null,
      companyId: localStorage.getItem("companyId"),
      count: 0,
      counts: [
        "storePhotosUrl",
        "storePhotosUrl1",
        "storePhotosUrl2",
        "storePhotosUrl3",
        "storePhotosUrl4"
      ],
      isFiveImg: true,
      isShopFiveImg: true,
      optionsI: JSON.parse(localStorage.getItem("queryIndustryObj")),
      optionsM: JSON.parse(localStorage.getItem("queryIndustryObj")),
      locale: localStorage.getItem("locale") === "en" ? "1" : "0",
      shopIndustry: "",
      shopStateInfo: "",
      merBigState: null,
      shopObjState: null,
      isDel: false,
      shopIndustryId: null
    };
  },
  created() {
    this.getMerchantList(this.searchMerchantData);
  },
  methods: {
    //格式化金额
    judgeBalance(row) {
      let formatMoney = row.balance;
      return formatMoney =  this.fmoney(formatMoney,2)
    },
    judgeEndamt(row) {
      let formatMoney = row.endamt;
      return formatMoney =  this.fmoney(formatMoney,2)
    },
    judgeFreezeamt(row) {
      let formatMoney = row.freezeamt;
      return formatMoney =  this.fmoney(formatMoney,2)
    },
    // 格式化金额
    fmoney(s, n){   
      s = s / 100;
      n = n > 0 && n <= 20 ? n : 2;   
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";   
      var l = s.split(".")[0].split("").reverse(),   
      r = s.split(".")[1];   
      let t = "";   
      for(let i = 0; i < l.length; i ++ )   
      {   
          t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");   
      }   
      return t.split("").reverse().join("") + "." + r;
    },
    // 限制上传图片大小
    beforeImgUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message(this.$t("hint.ThePictureSizeMustNotExceed5M"));
      }
      return isLt2M;
    },
    // 新增店铺行业
    selectShopIndestry() {
      this.$set(this.addShopData, "shopIndustry", this.shopIndustry);
    },
    // 修改店铺行业
    selectShopIndustryM() {
      this.$set(this.tableObj, "shopIndustry", this.tableObj.shopIndustry);
    },
    //删除照片
    delImg() {
      this.$set(this.tableObj, "storePhotosUrl", undefined);
      $("#modifyShopElupload").css({ display: "inline-block" });
    },
    delImg1() {
      this.$set(this.tableObj, "storePhotosUrl1", undefined);
      $("#modifyShopElupload").css({ display: "inline-block" });
    },
    delImg2() {
      this.$set(this.tableObj, "storePhotosUrl2", undefined);
      $("#modifyShopElupload").css({ display: "inline-block" });
    },
    delImg3() {
      this.$set(this.tableObj, "storePhotosUrl3", undefined);
      $("#modifyShopElupload").css({ display: "inline-block" });
    },
    delImg4() {
      this.$set(this.tableObj, "storePhotosUrl4", undefined);
      $("#modifyShopElupload").css({ display: "inline-block" });
    },
    //修改店铺相片
    shopPhotosSuccess(res) {
      if (this.tableObj.storePhotosUrl === undefined) {
        this.$set(this.tableObj, "storePhotosUrl", res.value);
        return false;
      } else if (this.tableObj.storePhotosUrl1 === undefined) {
        this.$set(this.tableObj, "storePhotosUrl1", res.value);
        return false;
      } else if (this.tableObj.storePhotosUrl2 === undefined) {
        this.$set(this.tableObj, "storePhotosUrl2", res.value);
        return false;
      } else if (this.tableObj.storePhotosUrl3 === undefined) {
        this.$set(this.tableObj, "storePhotosUrl3", res.value);
        return false;
      } else if (this.tableObj.storePhotosUrl4 === undefined) {
        this.$set(this.tableObj, "storePhotosUrl4", res.value);
        return false;
      }
      if (
        this.tableObj.storePhotosUrl &&
        this.tableObj.storePhotosUrl1 &&
        this.tableObj.storePhotosUrl2 &&
        this.tableObj.storePhotosUrl3 &&
        this.tableObj.storePhotosUrl4
      ) {
        this.isShopFiveImg = false;
      }
    },
    //新增店铺照片
    newShopPhotosSuccess(res) {
      const that = this;
      for (let i = this.counts.length; i >= 0; i--) {
        if (this.addShopData[this.counts[i]] === undefined) {
          this.count = i;
        }
      }
      if (this.count === 0) {
        this.addShopData.storePhotosUrl = res.value;
        const liObj = $("<li>").attr("id", "liID");
        const imgObj = $("<img>").attr("src", this.addShopData.storePhotosUrl);
        const spanObj = $("<span>")
          .attr("class", "delImg")
          .attr("id", "spanID")
          .text("×");
        liObj
          .append(imgObj)
          .append(spanObj)
          .appendTo("#shopImgUl");
        $("#spanID").click(function() {
          // console.log(that.addShopData);
          that.$set(that.addShopData, "storePhotosUrl", undefined);
          liObj.remove();
          this.count = 0;
          $("#newShopElipload").css({ display: "inline-block" });
        });
      } else if (this.count === 1) {
        this.addShopData.storePhotosUrl1 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src", this.addShopData.storePhotosUrl1);
        const spanObj = $("<span>")
          .attr("class", "delImg")
          .attr("id", "spanID" + this.count)
          .text("×");
        liObj
          .append(imgObj)
          .append(spanObj)
          .appendTo("#shopImgUl");
        $("#spanID1").click(function() {
          // console.log(that.addShopData);
          that.$set(that.addShopData, "storePhotosUrl1", undefined);
          liObj.remove();
          this.count = 1;
          $("#newShopElipload").css({ display: "inline-block" });
        });
      } else if (this.count === 2) {
        this.addShopData.storePhotosUrl2 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src", this.addShopData.storePhotosUrl2);
        const spanObj = $("<span>")
          .attr("class", "delImg")
          .attr("id", "spanID" + this.count)
          .text("×");
        liObj
          .append(imgObj)
          .append(spanObj)
          .appendTo("#shopImgUl");
        $("#spanID2").click(function() {
          // console.log(that.addShopData);
          that.$set(that.addShopData, "storePhotosUrl2", undefined);
          liObj.remove();
          this.count = 2;
          $("#newShopElipload").css({ display: "inline-block" });
        });
      } else if (this.count === 3) {
        this.addShopData.storePhotosUrl3 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src", this.addShopData.storePhotosUrl3);
        const spanObj = $("<span>")
          .attr("class", "delImg")
          .attr("id", "spanID" + this.count)
          .text("×");
        liObj
          .append(imgObj)
          .append(spanObj)
          .appendTo("#shopImgUl");
        $("#spanID3").click(function() {
          // console.log(that.addShopData);
          that.$set(that.addShopData, "storePhotosUrl3", undefined);
          liObj.remove();
          this.count = 3;
          $("#newShopElipload").css({ display: "inline-block" });
        });
      } else if (this.count === 4) {
        this.addShopData.storePhotosUrl4 = res.value;
        const liObj = $("<li>").attr("id", "liID" + this.count);
        const imgObj = $("<img>").attr("src", this.addShopData.storePhotosUrl4);
        const spanObj = $("<span>")
          .attr("class", "delImg")
          .attr("id", "spanID" + this.count)
          .text("×");
        liObj
          .append(imgObj)
          .append(spanObj)
          .appendTo("#shopImgUl");
        $("#spanID4").click(function() {
          // console.log(that.addShopData);
          that.$set(that.addShopData, "storePhotosUrl4", undefined);
          liObj.remove();
          this.count = 4;
          $("#newShopElipload").css({ display: "inline-block" });
        });
      }
      if (
        this.addShopData.storePhotosUrl &&
        this.addShopData.storePhotosUrl1 &&
        this.addShopData.storePhotosUrl2 &&
        this.addShopData.storePhotosUrl3 &&
        this.addShopData.storePhotosUrl4
      ) {
        // console.log(111);
        this.isFiveImg = false;
      }
    },
    //格式化显示数据
    merchantState(row) {
      let state = row.state;
      if (state === "0") {
        return (state = this.$t("search.Pending"));
      } else if (state === "1") {
        return (state = this.$t("button.Enabled"));
      } else if (state === "2") {
        return (state = this.$t("search.Rejected"));
      } else if (state === "3") {
        return (state = this.$t("button.Suspended"));
      }
    },
    //清空筛选条件
    resetFilter() {
      this.searchMerchantData.name = "";
      this.searchMerchantData.no = "";
      this.searchMerchantData.dName = "";
      this.searchMerchantData.startDate = "";
      this.searchMerchantData.state = "";
      this.handleFilter();
    },
    //启用
    enable(id) {
      let merchantId = id;
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: this.$t("hint.SureToEnableThisMerchant"),
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel"),
        beforeClose: (action, instance, done) => {
          if (action == "confirm") {
            this.enableMercAjax(merchantId, 1); //1为启用   3为停用
          }
          done();
        }
      });
    },

    //停用
    disable(id) {
      let merchantId = id;
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: this.$t("hint.SureToSuspendThisMerchant"),
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel"),
        beforeClose: (action, instance, done) => {
          if (action == "confirm") {
            this.enableMercAjax(merchantId, 3); //1为启用   3为停用
          }
          done();
        }
      });
    },
    //商户启用停用接口方法
    enableMercAjax(id, enabled) {
      mercUpdateIsEnabled(id, enabled)
        .then(res => {
          if (res.code === 0) {
            this.handleFilter();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 删除商户
    del(merId, phone) {
      // console.log(merId + "========" + phone);
      delMer(merId, phone)
        .then(res => {
          if (res.code === 0) {
            this.getMerchantList(this.searchMerchantData);
          }
        })
        .catch(() => {});
    },
    //商户详情
    showMerchant(id, merState) {
      this.id = id;
      this.merState = merState;
      this.disId = id;
      this.states = 2;
      this.showSearch = false;
      this.merDetailsIsShow = true;
    },
    //店铺详情
    shopList(id, state) {
      this.merId = id;
      this.showSearch = false;
      this.shopListShow = true;
      this.disabled = true;
      this.merBigState = state;
      this.name = this.$t("mer.ShopInfo");
      this.shopDetailsDataFun(id);
      this.isShopFiveImg = false;
      this.showBtn = false;
      // this.queryIndustryAjaxM(this.locale);
      if (this.merBigState === "0" || this.merBigState === "2") {
        this.isModify = false;
        this.isADD = false;
      }
    },
    //店铺详情接口方法
    shopDetailsDataFun(id) {
      merchantShopTwo(id)
        .then(res => {
          this.shopListData = res.value;
          if (res.value.length != 0) {
            this.tableObj = this.shopListData[0];
            this.activeName = this.tableObj.shopName;
            this.shopObjState = this.tableObj.state;
            // if (this.tableObj.shopIndustry) {
            //   this.shopIndustryId = this.tableObj.shopIndustry;
            //   const modifyIndustryId = Number(this.tableObj.shopIndustry) - 11;
            //   $("#shopIndustryM").children()[1].placeholder = this.optionsI[
            //     modifyIndustryId
            //   ].industryName;
            // }
            if (this.shopObjState === 1) {
              this.isModify = false;
              this.showBtn = false;
              this.shopStateInfo =
                this.tableObj.remarks === "0"
                  ? this.$t("index.newShopApprovalPending")
                  : this.$t("index.amendmentApprovalPending");
              // this.shopStateInfo = this.$t("cash.audit");
            } else if (this.shopObjState === 3 && this.merBigState === "1") {
              this.shopStateInfo = this.tableObj.remarks === "0" ? this.$t("search.Rejected") : "";
              this.isDel = true;
              this.isModify = true;
              this.isADD = false;
              this.showBtn = false;
            } else if (this.shopObjState === 2 && this.merBigState === "1") {
              this.isModify = true;
              this.isADD = true;
              this.isDel = false;
              this.shopStateInfo = "";
            }
            if (this.merBigState === "0") {
              this.isModify = false;
              this.isADD = false;
              this.shopStateInfo = "";
              this.showBtn = false;
              this.isDel = false;
            }
          } else {
            this.tableObj = {};
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 删除店铺
    deleteShop() {
      delShop(this.tableObj.shopId)
        .then(res => {
          if (res.code === 0) {
            this.showSearch = true;
            this.shopListShow = false;
            this.disabled = true;
            this.isDel = false;
          }
        })
        .catch(() => {});
    },
    //店铺返回按钮
    shopGoback() {
      this.showSearch = true;
      this.shopListShow = false;
      this.shopStateInfo = "";
      this.tableObj = {};
      // this.shopIndustryM = "";
    },
    //店铺修改
    modify() {
      this.name = this.$t("mer.ShopModiify");
      this.showBtn = true;
      this.isModify = false;
      this.disabled = false;
      this.isShopFiveImg = true;
    },
    //店铺修改完成按钮
    modifyOk() {
      // console.log("店铺修改发送");
      const hintShopMsg =
        this.shopObjState === 3 && this.merBigState === "1"
          ? this.$t("hint.SureToAddThisShop")
          : this.$t("hint.SureToChangeInfoOfTheShop");
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: hintShopMsg,
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel"),
        beforeClose: (action, instance, done) => {
          if (action == "confirm") {
            this.tableObj.remarks = "1"; //审核类型  1为修改
            // if (this.shopIndustryId) {
            //   this.tableObj.shopIndustry = this.shopIndustryId;
            // }
            // console.log(this.tableObj);
            this.ajaxAddShop(this.tableObj);
          }
          done();
        }
      });
    },
    //新增店铺
    addShop() {
      this.addShopShow = true;
      this.shopListShow = false;
      // this.queryIndustryAjax(this.locale);
    },
    //新增店铺页面的返回按钮
    addGoback() {
      this.addShopShow = false;
      this.shopListShow = true;
    },
    //新增店铺页面的确认按钮
    addOk() {
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: this.$t("hint.SureToAddThisShop"),
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel")
      })
        .then(() => {
          this.addShopData.merchantId = this.merId; //商户id
          this.addShopData.remarks = "0"; //审核类型  0为增加
          this.ajaxAddShop(this.addShopData);
          this.handleFilter();
        })
        .catch(err => {
          console.log(err);
        });
    },
    //新增店铺向后台提交资料
    ajaxAddShop(value) {
      const func = this.shopObjState === 3 && this.merBigState === "1" ? reauditShop : addShopAjax;
      func(value).then(res => {
        if (res.code === 0) {
          this.addShopShow = false;
          this.showSearch = true;
          this.showBtn = false;
          this.shopListShow = false;
          this.$notify({
            title: this.$t("hint.Alert"),
            message: this.$t("hint.CreateOK"),
            type: "success",
            duration: 2000
          });
        } else {
          this.$notify({
            title: this.$t("hint.Alert"),
            message: this.$t("hint.CreateFailed"),
            type: "error",
            duration: 2000
          });
        }
      });
    },
    //获得商户列表的方法
    getMerchantList(value) {
      value.companyId = localStorage.getItem("companyId");
      value.distributorId = localStorage.getItem("distributorId");
      findMerchant(value)
        .then(res => {
          // console.log("打印商户查询返回的数据");
          // console.log(res);
          this.res = res.value;
          this.merchantDatas = res.value.list;
          // console.log("打印商户查询返回的数据");
          // console.log(this.merchantDatas);
        })
        .catch(error => {
          console.log(error);
        });
    },
    //按条件搜索的方法
    handleFilter() {
      //查询商户的参数
      const searchData = {};
      $.extend(searchData, this.searchMerchantData);
      this.formatObj(searchData);
      if (searchData.state === this.$t("button.Enabled")) {
        searchData.state = 1;
      }
      if (searchData.state === this.$t("button.Suspended")) {
        searchData.state = 3;
      }
      if (searchData.state === this.$t("search.Pending")) {
        searchData.state = 0;
      }
      if (searchData.state === this.$t("search.Rejected")) {
        searchData.state = 2;
      }
      this.getMerchantList(searchData);
    },
    //新增商户
    addMerchant() {
      this.states = 1;
      this.showSearch = false;
      this.merDetailsIsShow = true;
    },
    //pageSize 改变时会触发
    handleSizeChange(val) {
      this.searchMerchantData.pageSize = val;
      this.handleFilter();
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.searchMerchantData.page = val;
      this.handleFilter();
    },
    // 切换店铺
    handleClick(tab, event) {
      this.tableObj = {};
      this.tableObj = this.shopListData[tab.index];
      // if (!this.tableObj.shopIndustry) {
      //   this.shopIndustryM = "";
      // }
      // console.log(this.tableObj.shopIndustry);
      // if (this.tableObj.shopIndustry) {
      //   this.shopIndustryId = this.tableObj.shopIndustry;
      //   const modifyIndustryId = Number(this.tableObj.shopIndustry) - 11;
      //   $("#shopIndustryM").children()[1].placeholder = this.optionsI[
      //     modifyIndustryId
      //   ].industryName;
      // } else {
      //   this.shopIndustryM = "";
      // }
      this.shopObjState = this.tableObj.state;
      this.disabled = true;
      if (this.shopObjState === 1) {
        this.isModify = false;
        this.isADD = false;
        this.showBtn = false;
        this.isDel = false;
        this.shopStateInfo =
          this.tableObj.remarks === "0"
            ? this.$t("index.newShopApprovalPending")
            : this.$t("index.amendmentApprovalPending");
      } else if (this.shopObjState === 3 && this.merBigState === "1") {
        this.shopStateInfo =
          this.tableObj.remarks === "0" ? this.$t("search.Rejected") : "";
        this.isModify = true;
        this.showBtn = false;
        this.isADD = false;
        this.isDel = true;
      } else if (this.shopObjState === 2 && this.merBigState === "1") {
        this.isModify = true;
        this.isADD = true;
        this.shopStateInfo = "";
        this.showBtn = false;
        this.isDel = false;
      }
      if (this.merBigState === "0") {
        this.isModify = false;
        this.isADD = false;
        this.shopStateInfo = "";
        this.showBtn = false;
        this.isDel = false;
      }
    },
    //监听商户详情子组件事件
    merDetailsFun() {
      this.merDetailsIsShow = false;
      this.showSearch = true;
      this.getMerchantList(this.searchMerchantData);
    },
    formatObj(obj) {
      let arr = Object.keys(obj);
      for (let i = 0; i < arr.length; i++) {
        if (obj[arr[i]] === "") {
          obj[arr[i]] = null;
        }
      }
    },
  }
};
</script>
<style scoped>
.el-icon-plus:before {
  color: #00b589;
  font-size: 50px;
}
.shopStateStyle {
  position: absolute;
  right: 10px;
}
</style>